/**
 * EmotionReport Component Tests
 * Requirements: 5.1, 5.2, 5.3, 4.2, 4.5, 5.4, 5.5
 */

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { EmotionReport } from './EmotionReport';
import { EmotionReport as EmotionReportType } from '../types';

describe('EmotionReport Component', () => {
  const mockReport: EmotionReportType = {
    emotions: [
      { name: 'happy', intensity: 80, color: '#FFD700', icon: '😊' },
      { name: 'calm', intensity: 60, color: '#98FB98', icon: '😌' },
    ],
    suggestions: ['Take a deep breath', 'Go for a walk'],
    summary: 'You are feeling mostly positive today.',
    timestamp: new Date(),
  };

  it('should render nothing when no report and not loading', () => {
    const { container } = render(
      <EmotionReport
        report={null}
        generatedImage={null}
        isLoading={false}
      />
    );
    expect(container.firstChild).toBeNull();
  });

  it('should render loading skeleton when loading', () => {
    render(
      <EmotionReport
        report={null}
        generatedImage={null}
        isLoading={true}
      />
    );
    expect(screen.getByTestId('emotion-report')).toBeInTheDocument();
  });

  it('should render emotion items with colors and icons', () => {
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
      />
    );

    expect(screen.getByTestId('emotion-item-0')).toBeInTheDocument();
    expect(screen.getByTestId('emotion-item-1')).toBeInTheDocument();
    expect(screen.getByText('happy')).toBeInTheDocument();
    expect(screen.getByText('calm')).toBeInTheDocument();
  });

  it('should render suggestions as a list', () => {
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
      />
    );

    expect(screen.getByTestId('suggestions-list')).toBeInTheDocument();
    expect(screen.getByText('Take a deep breath')).toBeInTheDocument();
    expect(screen.getByText('Go for a walk')).toBeInTheDocument();
  });

  it('should render summary section', () => {
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
      />
    );

    expect(screen.getByTestId('summary')).toBeInTheDocument();
    expect(screen.getByText('You are feeling mostly positive today.')).toBeInTheDocument();
  });

  it('should render generated image when provided', () => {
    render(
      <EmotionReport
        report={mockReport}
        generatedImage="https://example.com/image.jpg"
        isLoading={false}
      />
    );

    const image = screen.getByTestId('generated-image');
    expect(image).toBeInTheDocument();
    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
  });

  it('should render image skeleton when loading image', () => {
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={true}
      />
    );

    expect(screen.getByTestId('image-skeleton')).toBeInTheDocument();
  });

  it('should render save button when onSave provided', () => {
    const onSave = vi.fn();
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
        onSave={onSave}
      />
    );

    expect(screen.getByTestId('save-button')).toBeInTheDocument();
  });

  it('should render share button when onShare provided', () => {
    const onShare = vi.fn();
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
        onShare={onShare}
      />
    );

    expect(screen.getByTestId('share-button')).toBeInTheDocument();
  });

  it('should call onSave when save button clicked', () => {
    const onSave = vi.fn();
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
        onSave={onSave}
      />
    );

    screen.getByTestId('save-button').click();
    expect(onSave).toHaveBeenCalledTimes(1);
  });

  it('should call onShare when share button clicked', () => {
    const onShare = vi.fn();
    render(
      <EmotionReport
        report={mockReport}
        generatedImage={null}
        isLoading={false}
        onShare={onShare}
      />
    );

    screen.getByTestId('share-button').click();
    expect(onShare).toHaveBeenCalledTimes(1);
  });
});
